<template>
  <div class="second-level-item">
    <div v-if="!showMobilePage" class="label">
      <div class="simple-label">{{ simpePrefix }}{{ unifyName }}</div>
      <el-tooltip effect="dark" placement="top">
        <div slot="content" style="flex-direction: column; display: flex; padding: 5px;">
          <!-- {{ wholePrefix }} -->
          <span v-for="(tip, index) in tips" :key="index" :style="{ 'marginBottom': index === tips.length - 1 ? 0 : '8px' }">
            {{ tip }}
          </span>
        </div>
        <tipIcon is-diy class="icon-info" />
      </el-tooltip>
    </div>
    <div class="amounts">
      <template v-for="(prop, index) in propArr">
        <el-tooltip :key="index" effect="dark" placement="top">
          <div slot="content" style="max-width: 170px; text-align: center">
            {{ dataDetail(prop) | moneyFilter }}
          </div>
          <div :style="{'max-width': `${100 / propNameArr.length}%`}" class="amount">{{ dataDetail(prop) | bigNumberZH }}</div>
        </el-tooltip>
        <!-- <span v-if="index < propArr.length - 1" :key="index + 'plus'" class="plus"> / </span> -->
      </template>
    </div>
    <div v-if="showMobilePage" class="label">
      <div class="simple-label">{{ simpePrefix }}{{ unifyName }}</div>
      <el-tooltip effect="dark" placement="top">
        <div slot="content" style="flex-direction: column; display: flex; padding: 5px;">
          <!-- {{ wholePrefix }} -->
          <span v-for="(tip, index) in tips" :key="index" :style="{ 'marginBottom': index === tips.length - 1 ? 0 : '8px' }">
            {{ tip }}
          </span>
        </div>
        <tipIcon is-diy class="icon-info" />
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import { bigNumberZH, moneyFilter } from '@/filters/number';
import { mapState } from 'vuex';
export default {
  name: 'SecondLevelItem',
  filters: {
    bigNumberZH,
    moneyFilter
  },
  props: {
    writeOffData: {
      type: Object,
      default: () => null
    },
    propArr: {
      type: Array,
      default: () => []
    },
    propNameArr: {
      type: Array,
      default: () => []
    },
    simplePropNameArr: {
      type: Array,
      default: () => []
    },
    unifyName: {
      type: String,
      default: ''
    },
    tips: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    simpePrefix() {
      return this.simplePropNameArr.join('/');
    },
    wholePrefix() {
      return this.tips.join('/');
    }
  },
  methods: {
    dataDetail(propName) {
      if (this.writeOffData && propName in this.writeOffData) {
        if (this.writeOffData[propName] !== 0) {
          return this.writeOffData[propName] / 100;
        } else {
          return this.writeOffData[propName];
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.second-level-item {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 0;
  width: 100%;
  &:first-child {
    border-bottom: 1px solid #ddd;
  }
  .label {
    display: flex;
    align-items: center;
    color: #aeb6c7;
    font-size: 12px;
    line-height: 23px;
    font-family: PingFangSC-Regular;
    .simple-label {
      margin-right: 5px;
    }
  }
  .amounts {
    display: flex;
    align-items: center;
    margin-left: 34px;
    .amount {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 14px;
      font-family: DIN Alternate, DIN Alternate-Bold;
      font-weight: 700;
      text-align: left;
      color: #333333;
      line-height: 20px;
    }
    .amount:first-child {
      margin-left: 0;
    }
  }
  @media screen and (max-width: 1366px) {
    padding: 12px 0 14px;
    height: auto;
    width: 100%;
    &:first-child {
      border-right: 0;
      border-bottom: 1px solid #ddd;
    }
  }
}
.icon-info {
  color: #999;
  &:hover {
    color: #406EFF;
  }
}
</style>
